#@layout()

#define script()
<script src="#(CPATH)/static/components/echarts/echarts.min.js"></script>
<script src="#(CPATH)/static/components/echarts/china.js"></script>
<script>

    function getValues(obj, keys) {
        var values = [];//用于存储匹配的属性值
        for (var i = 0, len = keys.length; i < len; i++) {
            var key = keys[i];
            values[i] = obj[key];
        }
        return values;
    }

    function initLineCharts(chart, data) {
        var keys = Object.keys(data);//获得对象属性名组成的数组
        var values = getValues(data, keys);//用于存储匹配的属性值
        var options = {
            xAxis: {
                type: 'category',
                data: keys
            },
            yAxis: {
                type: 'value'
            },
            series: [{
                data: values,
                type: 'line',
                smooth: true
            }]
        };
        chart.setOption(options);
    }


    var pvChart = echarts.init(document.getElementById("pv"));
    initLineCharts(pvChart, #(pvIn7Days))


    var uvChart = echarts.init(document.getElementById("uv"));
    initLineCharts(uvChart, #(uvIn7Days))


    var ipChart = echarts.init(document.getElementById("ip"));
    initLineCharts(ipChart, #(ipIn7Days))


    var chinaMap = echarts.init(document.getElementById("china-map"));
    var data = [];
    var queryData = #(ipMapIn7Days);
    var keys = Object.keys(queryData);//获得对象属性名组成的数组
    for (var i = 0, len = keys.length; i < len; i++) {
        var key = keys[i];
        data[i] = {name: key, value: queryData[key]};
    }

    loadMap("china", "中国", data);

    // 加载地图
    function loadMap(mapType, name, data) {
        var option = {
            title: {
                text: name || mapType,
                left: "center",
            },
            tooltip: {
                trigger: "item"
            },
            legend: {
                orient: "horizontal", //图例的排列方向
                textStyle: {color: "#ccc"},
                x: "left", //图例的位置
                y: "-20000000000000",
            },

            visualMap: {
                //颜色的设置  dataRange
                textStyle: {color: "#ccc"},
                x: "left",
                y: "bottom",
                splitList: [
                    {start: 1000},
                    {start: 500, end: 1000},
                    {start: 300, end: 500},
                    {start: 100, end: 300},
                    {start: 10, end: 100},
                    {start: 1, end: 10},
                    // { start: 0, end: 150000 }
                ],
                show: false,
                inRange: {
                    color: ['#e0ffff', '#006edd']
                },
            },
            roamController: {//控制地图的上下左右放大缩小
                show: true,
                x: 'right',
                mapTypeControl: {
                    'china': true
                }
            },
            series: [
                {
                    name: name || mapType,
                    type: "map",
                    mapType,
                    zoom: 1,//地图大小
                    roam: false, //是否开启鼠标缩放和平移漫游
                    itemStyle: {
                        //地图区域的多边形 图形样式
                        normal: {
                            //是图形在默认状态下的样式
                            label: {
                                show: true, //是否显示标签
                                textStyle: {
                                    color: "rgba(255,255,255,0)",
                                },
                            },
                        },
                        emphasis: {
                            //是图形在高亮状态下的样式,比如在鼠标悬浮或者图例联动高亮时
                            label: {show: true}
                        }
                    },
                    aspectScale: 0.85,
                    top: "0", //组件距离容器的距离
                    bottom: "0",
                    data: data
                    // data:[
                    //     { name: "上海", value: "200" },
                    //     { name: "北京", value: "100" },
                    //     { name: "天津", value: "300" },
                    //     { name: "重庆", value: "20" },
                    //     { name: "贵州", value: "500" },
                    // ]

                },
            ],
        };

        // 清理画布
        chinaMap.clear();

        chinaMap.setOption(option);

        chinaMap.off("click");
    }

</script>
#end
#define content()

<section class="content-header">

    <div class="container-fluid">
        <div class="row">
            <div class="col-sm-6">

                <div class="row mb-2">
                    <div class="col-sm-12">
                        <h1>
                            网站访问量
                            <small data-toggle="tooltip" title="" data-placement="bottom"
                                   data-trigger="hover"><i class="nav-icon far fa-question-circle"></i></small>
                            <small> 首页 / 统计 / 站点访问量</small>
                        </h1>
                    </div>
                </div>
            </div>
        </div>

    </div><!-- /.container-fluid -->


</section>

<section class="content">

    <div class="container-fluid">
        <div class="card card-outline card-primary">

            <div class="card-header  ">
                <table class="table table-striped">
                    <thead>
                    <tr>
                        <th>时间</th>
                        <th>浏览量（PV）</th>
                        <th>访客数(UV)	</th>
                        <th>IP数</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <td>今日</td>
                        <td>#(todayPv ?? 0)</td>
                        <td>#(todayUv ?? 0) </td>
                        <td>#(todayIp ?? 0)</td>
                    </tr>
                    <tr>
                        <td>昨日</td>
                        <td>#(yesterdayPv ?? 0)</td>
                        <td>#(yesterdayUv ?? 0) </td>
                        <td>#(yesterdayIp ?? 0)</td>
                    </tr>
                    <tr>
                        <td>本周</td>
                        <td>#(totalPv ?? 0)</td>
                        <td>#(totalUv ?? 0) </td>
                        <td>#(totalIp ?? 0)</td>
                    </tr>
                    </tbody>
                </table>
            </div>
            <!-- /.card-header -->
            <div class="card-body">

                <div class="row">

                    <section class="col-lg-6 connectedSortable">
                        <!-- Custom tabs (Charts with tabs)-->
                        <div class="card">
                            <div class="card-header">
                                <h3 class="card-title">
                                    <i class="fas fa-chart-pie mr-1"></i>
                                    PV（Page View）
                                </h3>
                            </div><!-- /.card-header -->
                            <div class="card-body">
                                <div id="pv" style="height: 350px; width: 100%;"></div>
                            </div><!-- /.card-body -->
                        </div>
                        <!-- /.card -->

                    </section>

                    <section class="col-lg-6 connectedSortable">
                        <!-- Custom tabs (Charts with tabs)-->
                        <div class="card">
                            <div class="card-header">
                                <h3 class="card-title">
                                    <i class="fas fa-chart-pie mr-1"></i>
                                    UV（Unique Visitor）
                                </h3>
                            </div><!-- /.card-header -->
                            <div class="card-body">
                                <div id="uv" style="height: 350px; width: 100%;"></div>
                            </div><!-- /.card-body -->
                        </div>
                        <!-- /.card -->

                    </section>

                    <!-- Left col -->
                    <section class="col-lg-6 connectedSortable">
                        <!-- Custom tabs (Charts with tabs)-->
                        <div class="card">
                            <div class="card-header">
                                <h3 class="card-title">
                                    <i class="fas fa-chart-pie mr-1"></i>
                                    IP
                                </h3>
                            </div><!-- /.card-header -->
                            <div class="card-body">
                                <div id="ip" style="height: 350px; width: 100%;"></div>
                            </div><!-- /.card-body -->
                        </div>
                        <!-- /.card -->

                    </section>
                    <!-- /.Left col -->
                    <!-- right col (We are only adding the ID to make the widgets sortable)-->
                    <section class="col-lg-6 connectedSortable">

                        <!-- Map card -->
                        <div class="card">
                            <div class="card-header border-0">
                                <h3 class="card-title">
                                    <i class="fas fa-map-marker-alt mr-1"></i>
                                    IP 地图
                                </h3>
                            </div>
                            <div class="card-body">
                                <div id="china-map" style="height: 350px; width: 100%;"></div>
                            </div>
                            <!-- /.card-body-->
                        </div>
                        <!-- /.card -->
                    </section>
                    <!-- right col -->
                </div>

            </div>
        </div>
    </div>
</section>
#end
